<template>
  <div class="resident p-2" >
    <el-card shadow="hover">
      <el-page-header @back="goBack" content="详情页面">
      </el-page-header>
      <div class="resident-info">
        <img src="@/assets/images/img/archive.png" alt="地图" class="map-image" />
        <div>
          <div>{{ form.name }}</div>
          <ul>
            <li class="text">建档机构 <span class="text-span">{{ form.documentationUnitName ? form.documentationUnitName : '-' }}</span></li>
            <li class="text">签约机构 <span class="text-span">{{form.signOrg ? form.signOrg : '-'}}</span></li>
            <li class="text">签约团队 <span class="text-span">{{form.signTeam ? form.signTeam : '-'}}</span></li>
          </ul>
        </div>
      </div>
      <div id="app">
        <ResidentInfo />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import ResidentInfo from './ResidentInfo.vue';
import { getPatientInfo } from '@/api/basicPublic/patientInfo';
// import useUserStore from "@/store/modules/user";

const route = useRoute();
const form = ref({});
const doctorDictList = ref([]);
const loading = ref(true);

/** 查询患者档案信息列表 */
async function getList() {
  try {
    const id = route.query.id;
    const res = await getPatientInfo(id);
    form.value = res.data || {};
    // doctorDictList.value = useUserStore().doctorList;
    // console.log('医生列表:', doctorDictList.value);
  } catch (error) {

  } finally {
    loading.value = false;
  }
}

onMounted(() => {
  getList(); // 组件挂载后立即获取数据
});
const goBack = () => {
  window.history.back(); // 返回到浏览器历史记录中的上一个页面
}
</script>

<style>
.resident {
  /* display: flex; */
  align-items: center;
}

.resident-info {
  display: flex;
  align-items: center;
  margin: 20px;
  /*border: maroon solid 1px;*/
}

.map-image {
  width: 100px;
  height: 100px;
  margin-right: 10px;
}

ul {
  list-style-type: none;
  padding: 0;
}

.text {
  margin-bottom: 10px;
  font-size: 14px;
  /*color: #5a5e66;*/
}

.text-span {
  /*color: #1d1e1f;*/
  margin-left: 10px;
}
</style>
